<script src="../../main.js"></script>
<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-video-play"></i> 直播
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
                <el-input v-model="query.title" placeholder="直播标题" class="handle-input mr10"></el-input>
                <el-input v-model="query.userName" placeholder="报名人" class="handle-input mr10"></el-input>
                <el-input v-model="query.company" placeholder="公司" class="handle-input mr10"></el-input>
                <el-input v-model="query.phone" placeholder="电话" class="handle-input mr10"></el-input>
                <el-select v-model="query.status" placeholder="状态" class="handle-input mr10">
                    <el-option
                            v-for="item in statusOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
                <template>
                    <el-date-picker
                            v-model="timeValue"
                            type="daterange"
                            align="right"
                            unlink-panels
                            range-separator="至"
                            start-placeholder="报名开始日期"
                            end-placeholder="报名结束日期"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            :picker-options="pickerOptions"
                            class="mr10">
                    </el-date-picker>
                </template>
                <el-button type="primary" icon="el-icon-search"  @click="handleSearch">搜索</el-button>
            </div>
            <el-table
                    :data="tableData"
                    border
                    class="table"
                    ref="multipleTable"
                    header-cell-class-name="table-header"
                 >
                <el-table-column prop="title" label="直播标题"></el-table-column>
                <el-table-column prop="status" label="状态">
                    <template slot-scope="scope">
                        <el-tag
                                :type="scope.row.status==='1'?'success':(scope.row.status==='0'?'danger':'')"
                        >{{scope.row.status=='0'?"待审批":(scope.row.status=='1'?'审批通过':'审批拒绝')}}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="userName" label="姓名"></el-table-column>
                <el-table-column prop="company" label="公司"></el-table-column>
                <el-table-column prop="phone" label="联系电话"></el-table-column>
                <el-table-column prop="createdTime" label="报名时间"></el-table-column>
                <el-table-column prop="wish" label="培训期望" show-overflow-tooltip></el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button
                                type="text"
                                icon="el-icon-edit"
                                @click="handleStatusUp(scope.row.id,scope.row.status)"
                                v-if="globalPermission.signup.edit"
                        >通过
                        </el-button>
                        <el-button
                                type="text"
                                icon="el-icon-edit"
                                @click="handleStatusDown(scope.row.id,scope.row.status)"
                                v-if="globalPermission.signup.edit"
                        >拒绝
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                        background
                        layout="total, prev, pager, next"
                        :current-page="query.pageNum"
                        :page-size="query.pageSize"
                        :total="pageTotal"
                        @current-change="handlePageChange"
                ></el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
    import {getAllLive, delLive, saveLive, editLive,createLiveFlow, getLiveDetail,updateStatus,getDetail} from '../../api/live';
    import {getAllTabs} from "../../api/tabs";
    import 'quill/dist/quill.snow.css' // 富文本编辑器外部引用样式  三种样式三选一引入即可
    import '@/utils/size-set.css';
    import {quillRedefine} from 'vue-quill-editor-upload'
    import { quillEditor,Quill } from 'vue-quill-editor';
    import {container, ImageExtend, QuillWatch} from 'quill-image-extend-module'
    Quill.register('modules/ImageExtend', ImageExtend);
    let fontSizeStyle = Quill.import('attributors/style/size');
    fontSizeStyle.whitelist = ['10px', '12px', '14px', '16px','18px','20px', '22px','24px', '26px', '28px','30px','32px', '36px','38px', '40px','45px', '50px', false];
    Quill.register(fontSizeStyle, true);
    //引入video样式
    import 'video.js/dist/video-js.css'
    import 'vue-video-player/src/custom-theme.css'

    var queryRequest = {url: "/manager/live/liveSignUpList"};
    var addRequest = {url: "/manager/live/addlive"};
    var updateRequest = {url: "/manager/live/updateLive"};
    var CreateFlowRequest = {url: "/manager/live/createLiveInfo"};
    var updateStatusRequest = {url: "/manager/live/updateSignUpStatus"};
    var delRequest = {url: "/manager/live/delLiveById"};
    var getLiveRequest ={url:"/manager/live/getLiveInfo"};
    export default {
        name: 'usertable',
        data() {
            return {
                query: {
                    title: '',
                    status: '',
                    startTime:'',
                    endTime:'',
                    pageNum: 1,
                    pageSize: 10
                },
                globalPermission: this.getPermission(),
                getToken:{'auth-token':localStorage.getItem('token')},
                uploadData:null,
                tableData: [],
                multipleSelection: [],
                delList: [],
                formIdShow: false,
                isCurEdit: false,
                pageTotal: 0,
                form: {},
                picData:[],
                idx: -1,
                id: -1,
                statusOptions: [{
                    value: 0,
                    label: '待审批'
                }, {
                    value: 1,
                    label: '审批通过'
                }, {
                     value: 2,
                     label: '审批拒绝'
                 }],
                pickerOptions: {
                    shortcuts: [{
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },
                statusQuery:{
                        id:'',
                        status
                },
                editorOption3: {
                    modules: {
                        toolbar: {
                            container: [
                                [{ indent: "-1" }, { indent: "+1" }], // 缩进
                                [{ size: fontSizeStyle.whitelist}], // 字体大小  ["small", false, "large", "huge"]
                                ["clean"] //上传图片、上传视频 //清除字体样式
                            ],
                            handlers: {
                                'image': function () {
                                    QuillWatch.emit(this.quill.id)
                                }
                            }
                        }
                    }
                },
                timeValue:'',
                timeSelValue:[],
            };
        },
        components:{
            quillEditor,quillRedefine
        },
        created() {
            queryRequest.data = this.query;
            this.getData();
        },
        methods: {
            // 获取数据
            getData() {
                //获取栏目列表
                getAllLive(queryRequest).then(res => {
                    this.tableData = res.data.list;
                    this.pageTotal = res.data.total;
                });
            },
            clean(){
                this.handleSearch();
            },
            refreshPic(){
                getLiveRequest.id =this.id;
                getLiveDetail(getLiveRequest).then(res=>{
                    this.picData[0] = res.data.coverImg;
                });
                this.handleSearch();
            },
            getPermission() {
                return JSON.parse(sessionStorage.getItem("permission"));
            },
            // 触发搜索按钮
            handleSearch() {
                this.query.startTime=this.timeValue[0];
                this.query.endTime=this.timeValue[1];
                this.$set(this.query, 'pageNum', 1);
                this.getData();
            },

            //审核
            handleStatusUp(id,status){
                this.id= id;
                this.status=1;
                this.titleMsg = "确定要通过吗?";
                // 二次上下架
                this.$confirm(this.titleMsg, '提示', {
                    type: 'warning'
                }).then(() => {
                    this.statusQuery.id=this.id;
                    this.statusQuery.status=this.status;
                    updateStatusRequest.data = this.statusQuery;
                    updateStatus(updateStatusRequest).then(res => {
                        if (res.code == 0) {
                            this.$message.success(`成功`);
                            this.handleSearch();
                        } else {
                            this.$message.error(res.message);
                        }
                    });
                }).catch(() => {
                });
            },

            //审核
            handleStatusDown(id,status){
                this.id= id;
                this.status=2;
                this.titleMsg = "确定要拒绝吗?";
                // 二次上下架
                this.$confirm(this.titleMsg, '提示', {
                    type: 'warning'
                }).then(() => {
                    this.statusQuery.id=this.id;
                    this.statusQuery.status=this.status;
                    updateStatusRequest.data = this.statusQuery;
                    updateStatus(updateStatusRequest).then(res => {
                        if (res.code == 0) {
                            this.$message.success(`成功`);
                            this.handleSearch();
                        } else {
                            this.$message.error(res.message);
                        }
                    });
                }).catch(() => {
                });
            },

            beforeUpload (file) {
                this.uploadData = {id:this.id};
                let promise = new Promise((resolve) => {
                    this.$nextTick(function () {
                        resolve(true);
                    });
                });
                return promise; //通过返回一个promis对象解决
            },

            // 保存编辑
            saveLiveEdit() {
                // 二次确认重新生成
                this.$confirm('确定要生成或重新生成吗？', '提示', {
                    type: 'warning'
                }).then(() => {
                    this.form.id = this.id;
                    CreateFlowRequest.data = this.form;
                    createLiveFlow(CreateFlowRequest).then(res => {
                        if (res.code == 0) {
                            this.$message.success(`修改成功`);
                            getLiveRequest.id =this.id;
                            getLiveDetail(getLiveRequest).then(res=>{
                               this.form = res.data;
                            });
                        } else {
                            this.$message.error(res.message);
                        }
                    });
                }).catch(() => {
                });
            },
            // 分页导航
            handlePageChange(val) {
                this.$set(this.query, 'pageNum', val);
                this.getData();
            }
        }
    };
</script>

<style scoped>
    .handle-box {
        margin-bottom: 20px;
    }

    .handle-select {
        width: 120px;
    }

    .handle-input {
        width: 130px;
        display: inline-block;
    }

    .table {
        width: 100%;
        font-size: 14px;
    }

    .red {
        color: #ff0000;
    }

    .mr10 {
        margin-right: 10px;
    }

    .table-td-thumb {
        display: block;
        margin: auto;
        width: 40px;
        height: 40px;
    }

    .show {
        display: block;
    }

    .hide {
        display: none;
    }

    .checkbox-rows {
        width: 130px;
        margin-top: 10px;
    }

    .el-checkbox.is-bordered + .el-checkbox.is-bordered {
        margin-left: 0px;
    }
</style>
